<div class="flex flex-col gap-10 p-4 items-center justify-center min-w-[300px] max-w-[700px] sm:min-w-[400px] mx-auto">

  <p-select
    [options]="emailProviders"
    optionLabel="label"
    placeholder="Select Email Provider"
    [(ngModel)]="selectedProvider"
    appendTo="body"
    class="w-full">
  </p-select>

  <p-select
    [options]="emailRecipients"
    optionLabel="label"
    placeholder="Select Book Recipient"
    [(ngModel)]="selectedRecipient"
    [disabled]="!selectedProvider"
    appendTo="body"
    class="w-full">
  </p-select>

  <p-button
    icon="pi pi-envelope"
    label="Email Book"
    [disabled]="!selectedProvider || !selectedRecipient"
    (onClick)="sendBook()">
  </p-button>

</div>
